<!DOCTYPE html>
<html lang="en">

<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link href="/styles/mall/index.css" rel="stylesheet">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
    <div th:replace="common/competition-common::mall-header"></div>
    <div th:replace="common/competition-common::competition-sidebar"></div>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>高校竞赛管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: rgba(200, 200, 255, 0.2);
        }

        .header {
            background-color: white;
            color: #333;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .logo {
            font-weight: bold;
            color: #001f3f;
            margin-right: 20px;
        }

        .search {
            padding: 10px;
            background-color: white;
            display: flex;
            align-items: center;
        }

        .search input {
            margin-right: 10px;
        }

        .navigation {
            width: 200px;
            height: 100vh;
            background-color: white;
            float: left;
            text-align: center;
            box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
        }

        .navigation ul {
            list-style: none;
            padding: 0;
        }

        .navigation li {
            padding: 10px 0;
            color: #001f3f;
            font-weight: bold;
        }

        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            height: calc(100vh - 64px);
            padding: 20px;
            margin-left: 200px;
        }

        .content-inner {
            width: 80%;
            text-align: left;
            color: #001f3f;
            font-weight: bold;
        }

        .team-box {
            width: 100%;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
        }

        .navigation-buttons {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            position: relative;
        }

        .navigation-buttons button {
            padding: 10px 20px;
            background-color: transparent;
            color: #666;
            border: none;
            cursor: pointer;
            font-weight: bold;
            font-family: "黑体";
            font-size: 18px; /* 小三号字体，大约18px */
        }

        .navigation-buttons button.active {
            color: purple;
        }

        .navigation-line {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: #ccc;
        }

        .active-underline {
            height: 2px;
            width: 33.33%;
            background-color: purple;
            position: absolute;
            transition: left 0.3s;
        }

        .team-box p,
        .team-box select {
            margin: 10px 0;
            font-size: 16px;
        }

        .team-box select {
            width: 100%;
            padding: 5px;
            margin-bottom: 20px;
        }

        .confirm-button {
            display: block;
            width: 200px;
            margin: 20px auto;
            padding: 10px;
            background-color: #0074d9;
            color: white;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
        }
    </style>

</head>

<body>


<div class="navigation">
    <ul>
        <li><a href="#">个人信息</a></li>
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">管理团队</a></li>
        <li><a href="#">报名比赛</a></li>
    </ul>
</div>

<div class="content">
    <div class="content-inner">
        <h2 class="title">报名比赛</h2>
        <div class="navigation-buttons">
            <button id="btn-not-started" onclick="showSection('not-started', this)">未开始</button>
            <button id="btn-in-progress" onclick="showSection('in-progress', this)">进行中</button>
            <button id="btn-ended" onclick="showSection('ended', this)">已结束</button>
            <div class="navigation-line">
                <div class="active-underline" id="active-underline"></div>
            </div>
        </div>
        <div class="team-box" id="not-started" style="display: none;">
            <h3>未开始的比赛</h3>
            <!-- 比赛列表（由数据库控制） -->
        </div>
        <input id="mid" name="mid" th:value="${dto.getMatchid()}" type="hidden"/>
        <input id="cid" name="cid" th:value="${dto.getComid()}" type="hidden"/>
        <div class="team-box" id="in-progress" style="display: none;">
            <h3>进行中的比赛</h3>
            <p>请选择团队:</p>
            <select id="team-select" name="teamid">
                <!-- 由数据库填充团队选项 -->
                <p th:each="t:${teams}">
                    <option th:text="${t.teamname}" th:value="${t.teamid}">团队1</option>
                </p>
            </select>
            <p>比赛时间: <span id="competition-time"
                               th:text="${#dates.format(dto.getStartdate(), 'yyyy-MM-dd')} + '至' + ${#dates.format(dto.getEnddate(), 'yyyy-MM-dd')}">2024-06-01
                至 2024-07-01</span>
            </p>
            <p>比赛简介: </p>
            <p id="competition-content" th:text="${dto.getScoringcriteria()}">这是比赛内容的详细描述。</p>
            <button class="confirm-button" onclick="Signup()">确认报名</button>
        </div>
        <div class="team-box" id="ended" style="display: none;">
            <h3>已结束的比赛</h3>
            <!-- 比赛列表（由数据库控制） -->
        </div>
    </div>
</div>

<script type="text/javascript">
    function Signup() {
        var mid = document.getElementById("mid").value;
        var cid = document.getElementById("cid").value;
        var tid = document.getElementById("team-select").value;
        $.ajax({
            url: "/competition/signup",
            type: "POST",
            data: {
                "mid": mid,
                "cid": cid,
                "tid": tid
            },
            success: function (data) {
                if (data.result == "success") {
                    alert("报名成功");
                    location.href = "/manageTeam";
                } else {
                    alert("报名失败");
                }
            }, error: function (xhr, status) {
                alert("修改失败");
            }
        });
    }

    function showSection(sectionId, button) {
        // 隐藏所有部分
        document.getElementById('not-started').style.display = 'none';
        document.getElementById('in-progress').style.display = 'none';
        document.getElementById('ended').style.display = 'none';

        // 显示选定部分
        document.getElementById(sectionId).style.display = 'block';

        // 更改按钮样式
        const buttons = document.querySelectorAll('.navigation-buttons button');
        buttons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        // 移动紫色下划线
        const underline = document.getElementById('active-underline');
        const buttonIndex = Array.from(buttons).indexOf(button);
        underline.style.left = `${buttonIndex * 33.33}%`;

        /*  // 模拟从数据库加载内容
          if (sectionId === 'in-progress') {
              // 这里可以调用API加载进行中的比赛信息
              document.getElementById('competition-time').textContent = '2024-06-01 至 2024-07-01';
              document.getElementById('competition-content').textContent = '这是比赛内容的详细描述。';
          }*/
    }

    // 初始打开显示进行中的比赛
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('btn-in-progress').click();
    });
</script>

</body>
</html>